<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <link rel="stylesheet" href="/pear_layui/admin/css/other/person.css"/>
  <link href="/pear_layui/component/pear/css/pear.css" rel="stylesheet" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
  <div class="layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-body" style="padding: 25px;">
        <div class="text-center layui-text">
          <div class="user-info-head" id="userInfoHead">
            <input type="hidden" name="avatar">
            <img id="avatar" src="/pear_layui/admin/images/avatar.jpg" width="115px" height="115px" alt="" title="点击上传">
          </div>
          <h2 style="padding-top: 20px;font-size: 20px;" id="maxName"></h2>
          <p style="padding-top: 8px;margin-top: 10px;font-size: 14px;" id="minAccount"></p>
        </div>
      </div>
      <div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
        <span>今日事 ，今日毕</span>
      </div>
    </div>
    <div class="layui-card">
      <div class="layui-card-header">
        登录记录
      </div>
      <div class="layui-card-body">
        <ul class="list">
          <li class="list-item"><span class="title">优化代码格式</span><span class="footer">2020-06-04 11:28</span>
          </li>
          <li class="list-item"><span class="title">新增消息组件</span><span class="footer">2020-06-01 04:23</span>
          </li>
          <li class="list-item"><span class="title">移动端兼容</span><span class="footer">2020-05-22 21:38</span>
          </li>
          <li class="list-item"><span class="title">系统布局优化</span><span class="footer">2020-05-15 14:26</span>
          </li>
          <li class="list-item"><span class="title">系统布局优化</span><span class="footer">2020-05-15 14:26</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="layui-col-md9">
    <div class="layui-card">
      <div class="layui-card-header">个人信息</div>
      <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief">
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <br>
              账户：&emsp;<span id="account"></span>&nbsp;&nbsp;&nbsp;<a href="javascript:" class="editPassword" style="margin-left:10px;font-size: 13px;color: #01AAED">修改密码</a>
              <br>
              <br>
              姓名：&emsp;<span id="realName"></span>
              <br>
              <br>
              性别：&emsp;<span id="gender"></span>
              <br>
              <br>
              年龄：&emsp;<span id="age"></span>
              <br>
              <br>
              手机：&emsp;<span id="phone"></span>
              <br>
              <br>
              住址：&emsp;<span id="address"></span>
              <br>
              <br>
              角色：&emsp;<span id="role"></span>
              <br>
              <br>
              简介：&emsp;<span id="description"></span>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <button class="layui-btn layui-btn-normal layui-btn-sm" style="background-color: #5FB878;">
                修改资料
              </button>
              <button class="layui-btn layui-btn-primary layui-btn-sm editPassword">更改密码</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--修改密码-->
<div style="display: none;" type="text/html" id="editPassword">
  <form class="layui-form" action="">
    <div class="mainBox">
      <div class="main-container">
        <div class="layui-form-item">
          <label class="layui-form-label">旧密码</label>
          <div class="layui-input-block">
            <input type="password" name="oldPassword" lay-verify="title" autocomplete="off"
                   placeholder="请输入标题" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">新密码</label>
          <div class="layui-input-block">
            <input type="password" name="newPassword" lay-verify="title" autocomplete="off"
                   placeholder="请输入标题" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">确认密码</label>
          <div class="layui-input-block">
            <input type="password" name="confirmPassword" lay-verify="title" autocomplete="off"
                   placeholder="请输入标题" class="layui-input">
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="button-container">
        <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="user-save">
          <i class="layui-icon layui-icon-ok"></i>
          提交
        </button>
        <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
          <i class="layui-icon layui-icon-refresh"></i>
          重置
        </button>
      </div>
    </div>
  </form>
</div>
<script src="/pear_layui/component/layui/layui.js"></script>
<script src="/pear_layui/component/pear/pear.js"></script>
<script>
  layui.use(['element', 'jquery', 'layer','upload'], function () {
    let $ = layui.jquery,
        layer = layui.layer,
        upload = layui.upload;

    let user;

    //加载个人信息
    $.post("/api/getLoginUserInfo",function (result) {
      if(result == undefined){
        layer.msg('未取到个人信息');
        window.location.href = "/main";
        return false;
      }
      user = result;

      $('#minAccount').html(user.account);
      $('#account').html(user.account);
      $('#maxName').html(user.realName);
      $('#realName').html(user.realName);
      if(user.gender == 1){
        $('#gender').html("<i class='layui-icon layui-icon-male'></i>");
      }else{
        $('#gender').html("<i class='layui-icon layui-icon-female'></i>");
      }
      $('#age').html(user.age);
      $('#phone').html(user.phone);
      $('#address').html(user.address);
      $('#description').html(user.description);
      let role = '';
      for (let i of user.roleSet){
        role += i.name + ',';
      }
      $('#role').html(role);

      //显示图片
      if(user.avatar != null){
        $('#avatar').attr('src','/file/downLoad?path=' + user.avatar);
      }
    },'json');

    let loading;
    //渲染文件上传组件
    upload.render({
      elem:"#userInfoHead",//绑定元素
      url: "/file/upload", //提交地址
      acceptMime: 'image/*',//规定打开文件选择框时，筛选出的文件类型
      field: 'file',
      method: "post",
      //文件上传成功后的回调函数
      done:function (res, index, upload) {
        layer.close(loading);
        if(res.isEmpty){
          layer.msg(res.message,{icon:2});
        }else{
          layer.msg(res.message,{icon:1});
          $('#avatar').attr('src','/file/downLoad?path=' + res.path);
        }
      },
      //文件选择完毕事件
      choose:function (obj) {
        loading = layer.load(1);
      },
      //上传失败
      error: function(){
        layer.close(loading);
        return layer.msg('上传失败，请重试!',{icon:2});
      }
    });

    /**
     * 修改密码
     */
    $(".editPassword").click(function () {
      layer.open({
        type: 1,
        title: '修改密码',
        shade: 0.1,
        area: ['550px', '280px'],
        content: $('#editPassword')
      });
    })
  })
</script>
</body>
</html>
